<template>
	<view class="index">
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height:`calc(100vh - 50px - ${safeBottom}px / 2)`}"
				scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Home ref="home"></Home>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height:`calc(100vh - 50px - ${safeBottom}px / 2)`}"
				scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Center ref="center"></Center>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height:`calc(100vh - 50px - ${safeBottom}px / 2)`}"
				scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Message ref="message"></Message>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" :style="{height:`calc(100vh - 50px - ${safeBottom}px / 2)`}"
				scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<My ref="my"></My>
			</scroll-view>
		</view>

		<u-tabbar :value="currentIndex" :fixed="false" activeColor="#51d0d0" inactiveColor="#707070"
			@change="switchTabbar">
			<u-tabbar-item v-for="(item,index) in tabbarList" :text="item.title"
				:icon="currentIndex===index ? item.activeIcon : item.inactiveIcon"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import Home from '../Home/Home.vue'
	import Center from '../Center/Center.vue'
	import Message from '../Message/Message.vue'
	import My from '../My/My.vue'

	import {
		mapState
	} from 'vuex';
	var jpushModule = uni.requireNativePlugin("JG-JPush");

	export default {
		components: {
			Home,
			Center,
			Message,
			My,
		},
		data() {
			return {
				// 底部tabbar菜单数据
				tabbarList: [{
						title: '首页',
						activeIcon: 'home-fill',
						inactiveIcon: 'home'
					},
					{
						title: '模块',
						activeIcon: 'grid-fill',
						inactiveIcon: 'grid'
					},
					{
						title: '消息',
						activeIcon: 'chat-fill',
						inactiveIcon: 'chat'
					},
					{
						title: '我的',
						activeIcon: 'account-fill',
						inactiveIcon: 'account'
					}
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: [],
				safeBottom: 0, // 安全底部

				linkJPushSum: 0,
			}
		},
		onLoad(options) {
			let that = this;

			const index = Number(options.index || 0)
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			})
			this.switchTabbar(index)

			// 连接SignalR
			// that.$store.dispatch('connect', {
			// 	urlBuilder: that.Request.IPAgreement() +
			// 		that.Request.serverIP().replace(/:(.*?)(?=:|$)/g, ':20001') + '/MSGHub'
			// });

			that.$store.dispatch('connect', {
				urlBuilder: 'http://mes.hzyc.org.cn:20001' + '/MSGHub'
			});


			// 获取消息数据
			try {
				that.$store.dispatch('GetMessageInfo').then(ret => {
					if (ret.status == 200) {

						let backType = that.$utils.binarySearch(ret.data.ds, uni.getStorageSync('openMsgDate'));


						if (backType) {
							if (that.$store.state.openMsgBtnType == 'true') {
								that.$store.state.activeCtx.show();
							}
							// that.$store.state.activeCtx.hide();
						}
					}
				})
			} catch (e) {
				console.log(e)
				//TODO handle the exception
			}


		},
		computed: {
			...mapState(['hasMsg'])
		},
		watch: {
			hasMsg(nval) {

				if (nval == true) {
					this.$store.commit('ChangeAndSetStateData', {
						Name1: 'hasMsg',
						data: false
					});

					this.$store.state.activeCtx.show();
				}
			},
		},
		mounted() {
			let that = this;




			let sequence = 1;
			if (uni.getSystemInfoSync().platform == "ios") {
				sequence = 2;
			}

			let alias = this.$store.state.UserInfo.Business + '_' + this.$store.state.UserInfo.UserID;

			// 设置别名
			jpushModule.setAlias({
				'sequence': sequence,
				'alias': alias,
			});


			jpushModule.addTagAliasListener(result => {
				console.log(result);
				let code = result.code;

				if (code != 0) {
					that.linkJPushSum++;
					if (that.linkJPushSum < 10) {
						// 重新设置别名
						jpushModule.setAlias({
							'sequence': sequence,
							'alias': alias,
						});
					} else {
						// 删除别名
						jpushModule.deleteAlias({
							'sequence': sequence
						})

					}
				}
				// let sequence = result.sequence
				// let tags = result.tags
				// let tag = result.tag
				// let tagEnable = result.tagEnable
				// let alias = result.alias
			})


			that.getSafeBottom();

			plus.push.addEventListener('click', function(msg) {
				console.log(msg)
				// plus.push.clear();


				// 点击系统通知栏消息
				// 打开消息列表，清除消息
				// 点击消息--存储当前时间，缓存时间前的都属于已读数据
				uni.setStorageSync('openMsgDate', JSON.stringify(new Date()));

				uni.$emit('msgReload', {
					status: 'reload'
				});
				if (that.$store.state.openMsgBtnType == 'true') {
					that.$store.state.activeCtx.hide();
				}
				uni.navigateTo({
					url: '/pages/Message/Message?nav=1'
				})

				// #ifdef APP-PLUS
				// 清理软件角标
				that.setBadge();
				// #endif

			}, false);
		},
		methods: {

			setBadge() { // 设置app角标  

				if (uni.getSystemInfoSync().platform == 'ios') {
					// var GtSdk = plus.ios.importClass('GeTuiSdk');
					// GtSdk.setBadge(0);
				} else {
					plus.runtime.setBadgeNumber(0);
					jpushModule.setBadge(0);
				}
				// 通知服务端app清除了角标  
				// jpushModule.setBadge(0);
			},
			// 切换导航
			switchTabbar(index) {
				if (index == 2) {
					// 点击消息--存储当前时间，缓存时间前的都属于已读数据
					uni.setStorageSync('openMsgDate', JSON.stringify(new Date()));

					uni.$emit('msgReload', {
						status: 'reload'
					});
					if (this.$store.state.openMsgBtnType == 'true') {
						this.$store.state.activeCtx.hide();
					}

					// #ifdef APP-PLUS
					// 清理软件角标
					this.setBadge();
					// #endif
				}

				this._switchTabbarPage(index);

				// if (index == 2) {
				// 	// 消息
				// 	uni.navigateTo({
				// 		url: '/pages/Message/Message'
				// 	})
				// } else {
				// 	this._switchTabbarPage(index);
				// }
			},

			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {},

			// 切换导航页面
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index];
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
			},

			// 获取安全底部高度
			getSafeBottom() {
				let that = this;
				let safeareaBottom = uni.getStorageSync('safeareaBottom');
				if (safeareaBottom) {
					that.safeBottom = safeareaBottom;
				} else {
					uni.getSystemInfo({
						success: function(res) {
							if (res.safeAreaInsets.bottom) {
								that.safeBottom = res.safeAreaInsets.bottom;
								uni.setStorageSync('safeareaBottom', that.safeBottom)
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		overflow: hidden;
		height: 100vh;
	}

	// .custom-tabbar-page {
	// height: calc(100vh - (50px + env(safe-area-inset-bottom) / 2));
	// }
</style>